<template>
    <div id="perData">
        <el-container>
            <!-- 头部 -->
            <el-header>
                <el-row id="header-space">
                    <el-col :span="5">
                        <el-form ref="form" :model="form" label-width="50px">
                            <el-form-item label="部门:">
                                <el-select v-model="form.personnel_bm" placeholder="全部">
                                    <el-option v-for="v in bmData" :label="v" :value="v">{{v}}</el-option>

                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="员工名称:">
                                <el-input v-model="form.personnel_ygmc" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form ref="form" :model="form" label-width="50px">
                            <el-form-item label="状态:">
                                <el-select v-model="form.personnel_zt" placeholder="全部">
                                    <el-option v-for="v in ztData" :label="v" :value="v">{{v}}</el-option>

                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="1" :offset="1">
                        <el-button type="primary" @click="check">查询</el-button>
                    </el-col>
                    <el-col :span="1" id="add-space">
                        <el-button type="info" @click="resize">重置</el-button>
                    </el-col>
                    <el-col :span="1" id="add-space">
                        <template>
                            <el-button type="success" @click="onAdd">新增</el-button>
                        </template>
                    </el-col>
                </el-row>
            </el-header>

            <!-- 表格 -->
            <el-main>
                <template>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="personnel_xh" label="序号" width="100">
                        </el-table-column>
                        <el-table-column prop="personnel_dlzh" label="登录账号" width="180">
                        </el-table-column>
                        <el-table-column prop="personnel_ygmc" label="员工名称" width="180">
                        </el-table-column>
                        <el-table-column prop="personnel_bm" label="部门" width="200">
                        </el-table-column>
                        <el-table-column prop="personnel_sjhm" label="手机号码" width="200">
                        </el-table-column>
                        <el-table-column prop="personnel_yxdz" label="邮箱地址" width="200">
                        </el-table-column>
                        <el-table-column prop="personnel_cjsj" label="创建时间" width="200">
                        </el-table-column>
                        <el-table-column prop="personnel_zt" label="状态" width="100">
                        </el-table-column>
                        <el-table-column prop="operate" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
                                <el-button v-show="scope.row.personnel_zt=='启用'?true:false" @click="disable(scope.row)"
                                    type="text">停用</el-button>
                                <el-button v-show="scope.row.personnel_zt=='停用'?true:false" @click="disable(scope.row)"
                                    type="text">启用</el-button>
                                <el-button @click="detailsOk(scope.row)" type="text">查看详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

            </el-main>
            <!-- 分页 -->
            <el-footer>
                <page></page>
            </el-footer>
        </el-container>

        <!-- 新增 -->
        <el-dialog title="新增人员" :visible.sync="addVisible" width="30%" :before-close="addClose">
            <el-form :model="addData" ref="ruleForm" label-width="100px">
                <el-form-item label="登录账号">
                    <el-input v-model="addData.dlzh" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="员工姓名">
                    <el-input v-model="addData.ygmc" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="电话号码">
                    <el-input v-model="addData.sjhm" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="addData.yxdz" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="addData.zt">
                        <template slot-scope="scope">
                            <p>{{scope.row.personnel_zt==1?'启用':'停用'}}</p>
                        </template>
                    </el-switch>
                </el-form-item>
                <el-form-item label="所属部门">
                    <el-select v-model="addData.bm" placeholder="请选择部门">
                        <el-option v-for="v in bmData" :label="v" :value="v">{{v}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="addData.desc" placeholder="请输入备注" resize="none"></el-input>
                </el-form-item>
                <el-form-item>
                    <template>
                        <el-button type="primary" @click="onAddOk">确定</el-button>
                        <el-button @click="addClose">取消</el-button>
                    </template>

                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog title="修改人员信息" :visible.sync="editVisible" width="30%" :before-close="editClose">
            <el-form :model="editData" ref="ruleForm" label-width="100px">
                <el-form-item label="登录账号">
                    <el-input v-model="editData.personnel_dlzh"></el-input>
                </el-form-item>
                <el-form-item label="员工姓名">
                    <el-input v-model="editData.personnel_ygmc"></el-input>
                </el-form-item>
                <el-form-item label="电话号码">
                    <el-input v-model="editData.personnel_sjhm"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="editData.personnel_yxdz"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="editData.personnel_zt"></el-switch>
                </el-form-item>
                <el-form-item label="所属部门">
                    <el-select v-model="editData.personnel_bm" placeholder="请选择部门">
                        <el-option v-for="v in bmData" :label="v" :value="v">{{v}}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="editData.desc" resize="none"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onEditOk">确定</el-button>
                    <el-button @click="editClose">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 人员详情 -->
        <el-dialog title="人员详情" :visible.sync="detailsVisible" width="50%" :before-close="detailsClose">
            <hr>
            <div>
                <el-row class="p-space2">
                    <el-col :span="24">
                        <span>人员信息</span>
                    </el-col>
                </el-row>
                <el-row class="p-space">
                    <el-col :span="6" :offset="2">
                        <el-col :span="8" class="font">
                            <span>登录账号：</span>
                        </el-col>
                        <el-col :span="16">
                            <span>{{details.personnel_dlzh}}</span>
                        </el-col>
                    </el-col>
                    <el-col :span="6" :offset="2">
                        <el-col :span="8" class="font">
                            <span>员工姓名：</span>
                        </el-col>
                        <el-col :span="16">
                            <span>{{details.personnel_ygxm}}</span>
                        </el-col>
                    </el-col>
                    <el-col :span="6" :offset="2">
                        <el-col :span="8" class="font">
                            <span>电话号码：</span>
                        </el-col>
                        <el-col :span="16">
                            <span>{{details.personnel_sjhm}}</span>
                        </el-col>
                    </el-col>
                </el-row>

                <el-row class="p-space">
                    <el-col :span="6" :offset="2">
                        <el-col :span="8" class="font">
                            <span>邮箱：</span>
                        </el-col>
                        <el-col :span="16">
                            <span>{{details.personnel_yxdz}}</span>
                        </el-col>
                    </el-col>
                    <el-col :span="6" :offset="2">
                        <el-col :span="8" class="font">
                            <span>所属部门：</span>
                        </el-col>
                        <el-col :span="16">
                            <span>{{details.personnel_bm}}</span>
                        </el-col>
                    </el-col>
                    <el-col :span="6" :offset="2">
                        <el-col :span="8" class="font">
                            <span>状态：</span>
                        </el-col>
                        <el-col :span="16">
                            <span>{{details.personnel_zt}}</span>
                        </el-col>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="6" :offset="2">
                        <el-col :span="8" class="font">
                            <span>创建时间：</span>
                        </el-col>
                        <el-col :span="16">
                            <span>{{details.personnel_cjsj}}</span>
                        </el-col>
                    </el-col>

                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="detailsClose">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    // 分页
    import Event from "../../utils/Event.js";
    import page from '../../components/page.vue';

    export default {
        components: { page },
        data() {
            return {
                form: {
                    personnel_ygmc: '',
                    personnel_bm: '',
                    personnel_zt: '',
                },
                totalData: [],
                // 将请求来的数据放入空数组
                page: 1,
                count: 5,
                // 获取数据库部门数据，然后去重，渲染
                bmData: [],
                // 新增
                addVisible: false,
                addData: {
                    dlzh: '',
                    ygmc: '',
                    sjhm: '',
                    yxdz: '',
                    zt: true,
                    bm: '',
                    cjsj: '',
                },
                // 编辑
                editVisible: false,
                editData: {
                    dlzh: '',
                    ygmc: '',
                    sjhm: '',
                    yxdz: '',
                    zt: true,
                    bm: '',
                    cjsj: '',
                },
                // 查询
                checkData: [],
                ztData: [],
                // 详情（人员信息）
                detailsVisible: false,
                details: {},
                tableData: [],
            }
        },

        methods: {
            // 获取数据,将请求的数据放入totalData里面
            getuser() {
                this.$axios({
                    url: '/record/personSel'
                }).then((res) => {
                    Event.$emit('table', res.data.data);
                    this.totalData = res.data.data
                    // 取出数据库里面部门一列的数据，然后push到bmData新数组，再对数据去重
                    for (let i = 0; i < res.data.data.length; i++) {
                        this.bmData.push(res.data.data[i].personnel_bm);
                        this.ztData.push(res.data.data[i].personnel_zt);
                    }
                    // 去重
                    this.bmData = [... new Set(this.bmData)];
                    this.ztData = [...new Set(this.ztData)];

                })
            },

            // 新增
            onAdd() {
                this.addVisible = true;
            },
            addClose() {
                this.$confirm('确定要关闭吗？', {
                    callback: () => {  //使用此参数指定 MessageBox 关闭后的回调
                        this.addVisible = false;
                    }
                });
            },
            onAddOk() {
                // 点击确认添加按钮的时候，获取实时时间传入到数据库(在点击确认提交之前获取时间)
                let date = new Date();
                let value = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
                this.addData.cjsj = value;
                // 开关，当开关为false的时候为停用，当开关为true的时候
                this.addData.zt == true ? this.addData.zt = '启用' : this.addData.zt = '停用'
                // 点击添加的时候，数据不能为空
                if (this.addData.ygmc == '') {
                    console.log(this.addData.ygmc);
                    this.$message({
                        message: '内容不能为空',
                        type: 'info'
                    })
                }else {
                    this.$axios({
                        url: '/record/personAdd',
                        method: 'post',
                        data: this.addData
                    }).then((res) => {
                        if (res.data.code == 200) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            })
                            this.addVisible = false;
                            this.getuser();
                            // 清空输入框的数据
                            this.addData = {
                                dlzh: '',
                                ygmc: '',
                                sjhm: '',
                                yxdz: '',
                                zt: true,
                                bm: '',
                            };
                        }
                    })
                }
                // 数
            },

            // 编辑
            handleEdit(data) {
                this.editVisible = true;
                this.editData = { ...data }
                this.editData.personnel_zt == '启用' ? this.editData.personnel_zt = true : this.editData.personnel_zt = false;
            },
            editClose() {
                this.$confirm('确定要关闭吗？', {
                    callback: () => {  //使用此参数指定 MessageBox 关闭后的回调
                        this.editVisible = false;
                    }
                });
            },
            onEditOk() {
                this.editData.personnel_zt == true ? this.editData.personnel_zt = '启用' : this.editData.personnel_zt = '停用';
                //json对象转数组的方法(i是一个键[i]是一个键值对象)
                let editArr = [];
                for (let i in this.editData) {
                    editArr.push(i, this.editData[i])

                };
                editArr.splice(0, 2);
                this.$axios({
                    url: '/record/personEdit',
                    method: 'post',
                    data: {
                        data: editArr,
                        xh: this.editData.personnel_xh
                    }
                }).then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '编辑成功',
                            type: 'success'
                        })
                        this.editVisible = false;
                        this.getuser();
                    }
                })
            },
            // 停用
            disable(data) {
                // this.disableData = { ...data }
                data.personnel_zt == '启用' ? data.personnel_zt = '停用' : data.personnel_zt = '启用';
                this.$axios({
                    url: '/record/personChange',
                    method: 'post',
                    data: {
                        zt: data.personnel_zt,
                        xh: data.personnel_xh
                    },
                }).then((res) => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: data.personnel_zt+'成功',
                            type: 'success'
                        })
                        this.getuser();
                    }
                })
            },
            // 搜索
            check() {
                for (let j in this.form) {
                    if (this.form[j].trim()) {
                        let arr = this.totalData.filter((i) => {
                            // if (i[j].indexOf(this.form[j]) != -1) {
                            //     return i[j];
                            // }
                            return i[j].indexOf(this.form[j]) != -1
                        })
                        // this.totalData = arr;
                        console.log(arr);
                        Event.$emit('noticeData', arr)
                    }
                }
            },
            // 重置
            resize() {
                this.form.personnel_bm = '';
                this.form.personnel_ygmc = '';
                this.form.personnel_zt = '';
                this.arr = [];
                this.getuser();
            },

            // 详情（人员信息）
            detailsOk(data) {
                this.detailsVisible = true;
                console.log(data);
                this.details = { ...data }
            },
            detailsClose() {
                this.detailsVisible = false;
                this.details = {}
            },
            // 接收数据
            receive() {
                Event.$on('tableData', v => {
                    this.tableData = v.tableData
                })
            }
        },
        // 页面加载时调用数据
        created: function () {
            this.getuser();
        },


        // 挂载后
        mounted() {
            this.receive()
        },
        // 数据更新前
        beforeUpdate() {
            this.receive();

        }

    }

</script>

<style scoped lang="less">
    .el-main {
        padding: 20px;
    }

    .el-select,
    .el-input {
        width: 100%;
    }

    #add-space {
        margin-left: 20px;
    }

    .el-header {
        margin-top: 20px;
    }

    .p-space {
        margin-bottom: 20px;
    }

    .font {
        text-align: justify;
        text-align-last: justify;
        /* text-align: right; */
    }

    .el-footer {
        text-align: center;
    }

    .p-space2 {
        margin-bottom: 20px;
        margin-top: 20px;
    }
</style>